<template>
	<div class="firends-container">
		<div v-if="isLogin">
			<van-tabs class="table-title" v-model:active="index" @click-tab="onClickTab">
				<van-tab title="好友列表">
					<div class="firends-list">
						<!-- 好友列表 -->
						<div class="firends-list-name"></div>
						<van-list>
							<div class="firends-item" v-for="(item, i) in userList" :key="i" @click="msgWith(item)">
								<van-image class="item-header" round width="36px" height="36px" :src="item.header" />
								<div class="item-account">{{item.account}}</div>
							</div>
						</van-list>
						<!-- todo 浮动 -->
						<div class="btn-firends-add" v-if="isLogin">
							<van-button round icon="plus" type="primary" @click="addFirend()">添加好友</van-button>
						</div>
					</div>
				</van-tab>
				<van-tab title="申请列表">
					<div class="add-list">
						<!-- 好友列表 -->
						<div class="add-firend-name"></div>
						<van-list>
							<div class="add-firend-item" v-for="(item, i) in addList" :key="i">
								<van-image class="item-add-header" round width="36px" height="36px"
									:src="item.header" />
								<div class="item-add-account">{{item.account}}</div>
								<van-button class="item-add-btn" round icon="plus" type="primary"
									@click="agreeFirends(item)">添加</van-button>
							</div>
						</van-list>
					</div>
				</van-tab>
			</van-tabs>
		</div>
		<div v-else class="to-login" @click="toLogin()">
			前往登录
		</div>
	</div>
</template>

<script>
	import {
		showToast
	} from 'vant';
	export default {
		data() {
			return {
				index: 0,
				isLogin: false,
				userList: [],
				addList: []
			}
		},
		beforeUpdate() {

		},
		mounted() {
			if (this.$store.getters.isLogin) {
				this.isLogin = true
				console.log(this.index);
				this.tabChanged(this.index)
			}
		},
		methods: {
			tabChanged(index) {
				if (index == 0) {
					// 好友列表
					let that = this
					// 已经登录 请求 好友列表
					this.$http.queryFirends({
							"account": this.$store.getters.userInfo.account
						})
						.then(function(resp) {
							console.log(resp.data);
							that.showFirends(resp.data.data)
						})
						.catch(function(e) {
							console.log(e);
						})
						.then(function() {
							console.log("隐藏loading");
						})
				} else {
					let that = this
					this.isLogin = true
					// 已经登录 请求 申请添加列表
					this.$http.queryAddList({
							"account": this.$store.getters.userInfo.account
						})
						.then(function(resp) {
							console.log(resp.data);
							that.showAddList(resp.data.data)
						})
						.catch(function(e) {
							console.log(e);
						})
						.then(function() {
							console.log("隐藏loading");
						})
				}
			},
			onClickTab(tab) {
				console.log(JSON.stringify(tab));
				this.tabChanged(tab.name)
			},
			showFirends(firends) {
				this.userList = firends
			},
			addFirend() {
				this.$router.push("/addfriends")
			},
			msgWith(user) {
				showToast("将要开启与 " + user.account + " 的聊天")
			},
			showAddList(list) {
				this.addList = list
			},
			agreeFirends(user) {
				// 同意 user (from) 的 好友申请 (to)
				showToast("同意 " + user.account + " 的添加好友申请");
				let that = this
				this.$http.agreeFirends({
						"from": user.account,
						"to": this.$store.getters.userInfo.account
					})
					.then(function(resp) {
						console.log(resp.data);
						// 添加成功  切换列表
						that.index = 0
						that.tabChanged(that.index)
					})
					.catch(function(e) {
						console.log(e);
					})
					.then(function() {
						console.log("隐藏loading");
					})
			},
			toLogin() {
				this.$router.push("/login")
			},
		},
	}
</script>

<style lang="scss">
	.firends-container {

		& .table-title {

			& .firends-list {

				& .firends-list-name {
					height: 16px;
				}

				& .firends-item {
					padding-left: 20px;
					height: 56px;
					background: #ffffff;
					align-items: center;
					display: flex;
					border-bottom: 1px solid #ececec;

					& .item-header {}

					& .item-account {
						margin-left: 20px;
					}
				}

				& .btn-firends-add {
					position: fixed;
					bottom: 56px;
					width: 100%;
					text-align: center;
				}
			}

			& .add-list {
				& .add-firend-name {
					height: 16px;
				}

				& .add-firend-item {
					padding-left: 20px;
					height: 56px;
					background: #ffffff;
					align-items: center;
					display: flex;
					border-bottom: 1px solid #ececec;

					& .item-add-header {}

					& .item-add-account {
						margin-left: 20px;
						flex: 1;
					}

					& .item-add-btn {
						height: 60%;
						width: 90px;
						margin-right: 20px;
					}
				}
			}
		}

		& .to-login {
			// 相对父布局定位 左上角
			position: relative;
			top: 50%;
			// 偏移
			transform: translateY(-50%);
			// 水平居中
			text-align: center;
		}
	}
</style>